<!--
	This file is part of ELCube.
	ELCube is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	ELCube is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	You should have received a copy of the GNU Affero General Public License
	along with ELCube.  If not, see <https://www.gnu.org/licenses/>.
-->
<template>
    <nk-def-card>


        <nk-form :edit="editMode" :col="2">
            <nk-form-item title="激活条件" :col="2">
                <nk-sp-el-view :el="def.activeSpEL"></nk-sp-el-view>
                <nk-sp-el-editor slot="edit" v-model="def.activeSpEL" placeholder="激活条件"></nk-sp-el-editor>
            </nk-form-item>
            <nk-form-item title="生效条件" :col="2">
                <nk-sp-el-view :el="def.effectiveSpEL"></nk-sp-el-view>
                <nk-sp-el-editor slot="edit" v-model="def.effectiveSpEL" placeholder="生效条件"></nk-sp-el-editor>
            </nk-form-item>

            <nk-form-item title="凭证类别" :required="true" :validate-for="def.voucherKind">
                {{def.voucherKind}}
                <a-input slot="edit" size="small" v-model="def.voucherKind"></a-input>
            </nk-form-item>
            <nk-form-item title="记账日期" :required="true" :validate-for="def.accountDateSpEL">
                {{def.accountDateSpEL}}
                <nk-sp-el-editor slot="edit" v-model="def.accountDateSpEL" placeholder="记账日期"></nk-sp-el-editor>
            </nk-form-item>
            <nk-form-item title="会计年度" :required="true" :validate-for="def.accountYearSpEL">
                {{def.accountYearSpEL}}
                <nk-sp-el-editor slot="edit" v-model="def.accountYearSpEL" placeholder="会计年度"></nk-sp-el-editor>
            </nk-form-item>
            <nk-form-item title="会计期间" :required="true" :validate-for="def.accountPeriodSpEL">
                {{def.accountPeriodSpEL}}
                <nk-sp-el-editor slot="edit" v-model="def.accountPeriodSpEL" placeholder="会计期间"></nk-sp-el-editor>
            </nk-form-item>

        </nk-form>


        <vxe-toolbar v-if="editMode">
            <template v-slot:buttons>
                <vxe-button icon="fa fa-plus" status="perfect" size="mini" @click="xTableVarAdd()">新增</vxe-button>
            </template>
        </vxe-toolbar>
        <vxe-table
                ref="xTableVars"
                row-key
                auto-resize
                keep-source
                resizable
                size="mini"
                border=inner
                :data="def.vars"
                :edit-config="{trigger: 'click', mode: 'row', showIcon: editMode, showStatus: true,activeMethod}">
            <vxe-column field="key"            width="10%"  title="变量"   :edit-render="{name: '$input',props: {type: 'text',maxlength:16,placeholder:'变量'}}"></vxe-column>
            <vxe-column field="valueSpEL"      width="60%"  title="表达式"  :edit-render="{}">
                <template v-slot:edit="{row}">
                    <nk-sp-el-editor v-model="row.valueSpEL" placeholder="数据表达式"></nk-sp-el-editor>
                </template>
            </vxe-column>
            <vxe-column field="remark"         width="15%"  title="描述"    :edit-render="{name: '$input',props: {type: 'text',maxlength:16,placeholder:'描述'}}"></vxe-column>
            <vxe-table-column title="#">

                <template v-slot="{row,seq,items}">
                    <span v-if="editMode" class="drag-btn" style="margin-left: 10px;">
                        <a-icon type="swap" :rotate="90" />
                    </span>
                    <span v-if="editMode" style="margin-right: 10px;" @click="xTableVarRemove(seq)">
                        <a-icon type="delete" />
                    </span>
                </template>

            </vxe-table-column>
        </vxe-table>
        <div style="height: 10px;"></div>

        <vxe-toolbar v-if="editMode">
            <template v-slot:buttons>
                <vxe-button icon="fa fa-plus" status="perfect" size="mini" @click="xTableAdd()">新增</vxe-button>
            </template>
        </vxe-toolbar>
        <vxe-table
                ref="xTable"
                row-key
                auto-resize
                keep-source
                resizable
                size="mini"
                border=inner
                :data="def.items"
                @edit-actived="rowEditActived"
                @toggle-row-expand="rowExpand"
                :edit-config="{trigger: 'click', mode: 'row', showIcon: editMode, showStatus: true,activeMethod}">
            <vxe-column field="subject"        width="8%"  title="科目"    :edit-render="{name: '$input',props: {type: 'text',maxlength:16,placeholder:'科目'}}"></vxe-column>
            <vxe-column field="businessKey"    width="6%"  title="BK"     :edit-render="{name: '$input',props: {type: 'text',maxlength:16,placeholder:'业务KEY'}}"></vxe-column>
            <vxe-column field="subjectDesc"    width="10%"  title="描述"   :edit-render="{name: '$input',props: {type: 'text',maxlength:100,placeholder:'科目描述'}}"></vxe-column>
            <vxe-column field="currType"       width="6%"   title="币种"   :edit-render="{name: '$input',props: {type: 'text',maxlength:16,placeholder:'币种'}}"></vxe-column>
            <vxe-column field="category"       width="6%"   title="借贷"   :edit-render="{name: '$select',props: {options:[{label:'借',value:'D'},{label:'贷',value:'C'}]}}" :formatter="categoryFilter"></vxe-column>
            <vxe-column field="dataSourceSpEL" width="10%"   title="行数据源" :edit-render="{}">
                <template v-slot:edit="{row}">
                    <nk-sp-el-editor v-model="row.dataSourceSpEL" placeholder="多明细数据源表达式"></nk-sp-el-editor>
                </template>
            </vxe-column>
            <vxe-column field="amountSpEL"     width="10%"  title="金额" :edit-render="{}">
                <template v-slot:edit="{row}">
                    <nk-sp-el-editor v-model="row.amountSpEL" placeholder="金额表达式"></nk-sp-el-editor>
                </template>
            </vxe-column>
            <vxe-column field="targetDocIdSpEL"     width="10%"  title="单据ID" :edit-render="{}">
                <template v-slot:edit="{row}">
                    <nk-sp-el-editor v-model="row.targetDocIdSpEL" placeholder="单据ID表达式"></nk-sp-el-editor>
                </template>
            </vxe-column>
            <vxe-column field="explanationSpEL"  width="10%"  title="摘要"      :edit-render="{}">
                <template v-slot:edit="{row}">
                    <nk-sp-el-editor v-model="row.explanationSpEL" placeholder="摘要表达式"></nk-sp-el-editor>
                </template>
            </vxe-column>
            <vxe-column field="cashFlowSpEL"  width="8%"  title="现金流量"      :edit-render="{}">
                <template v-slot:edit="{row}">
                    <nk-sp-el-editor v-model="row.cashFlowSpEL" placeholder="现金流量表达式"></nk-sp-el-editor>
                </template>
            </vxe-column>
            <vxe-column field="cashFlowSide" width="6%"   title="方向" :edit-render="{name: '$select',props: {options:[{label:'正向',value:1},{label:'反向',value:-1}]}}" :formatter="cashFlowSideFilter"></vxe-column>
            <vxe-table-column type="expand" title="辅助核算 #" align="right">

                <template v-slot="{row,seq,items}">
                    <span v-if="editMode" style="margin: 0 10px;" @click="xTableRemove(seq)">
                        <a-icon type="delete" />
                    </span>
                </template>
                <template #content="{ row }">
                    <div style="padding:5px 10px 5px;">
                        <a-button v-if="editMode" type="link" @click="xTableAssAdd(row)">+</a-button>
                        <a-row v-for="(item,index) in row.assists" :key="index">
                            <a-col :span="4">
                                <nk-edit-slot :editMode="editMode">
                                    <div style="text-align: right;padding-right: 10px;font-weight: bold;">{{item.key}}:</div>
                                    <a-input slot="edit" placeholder="key" size="small" v-model="item.key"></a-input>
                                </nk-edit-slot>
                            </a-col>
                            <a-col :span="6">
                                <nk-edit-slot :editMode="editMode">
                                    {{item.valueSpEL}}
                                    <nk-sp-el-editor slot="edit" placeholder="value" v-model="item.valueSpEL"></nk-sp-el-editor>
                                </nk-edit-slot>
                            </a-col>
                            <a-col :span="2">
                                <a-button v-if="editMode" type="link" @click="xTableAssRemove(row,index)">x</a-button>
                            </a-col>
                        </a-row>
                    </div>
                </template>

            </vxe-table-column>
        </vxe-table>



    </nk-def-card>
</template>

<script>
    import MixinDef from "MixinDef";
    import MixinSortable from "MixinSortable";

    export default {
        mixins:[new MixinDef({items:[],vars:[]}),MixinSortable()],
        computed:{
        },
        created() {
            this.$nkSortableVxeTable(true);
        },
        methods:{
            activeMethod(){return this.editMode;},
            xTableAdd(){
                if(!this.def.items){
                    this.$set(this.def,'items',[]);
                }
                const row = {category:'D',assists:[],cashFlowSide:1};
                this.def.items.push(row);
                this.$refs.xTable.setActiveRow(row);
            },
            xTableRemove(i){
                this.def.items.splice(i-1,1);
            },
            xTableAssAdd(row){
                if(!row.assists){
                    this.$set(row,'assists',[]);
                }
                const ass = {};
                row.assists.push(ass);
            },
            xTableAssRemove(row,i){
                row.assists.splice(i-1,1);
            },
            rowEditActived({row}){
                this.$refs.xTable.setRowExpand([row], true);
                this.rowExpand({row, expanded:true});
            },
            rowExpand({row}){
                // 获取当前展开的所有行(除当前行外)，并将其收起
                const expandRecords = this.$refs.xTable.getRowExpandRecords();
                expandRecords.splice(expandRecords.indexOf(row),1);
                this.$refs.xTable.setRowExpand(expandRecords, false);
            },
            categoryFilter({cellValue}){
                if(cellValue==='C'){
                    return '贷'
                }
                if(cellValue==='D'){
                    return '借'
                }
                return cellValue
            },
            cashFlowSideFilter({cellValue}){
                if(cellValue===-1){
                    return '反向'
                }
                return '正向'
            },

            xTableVarAdd(){
                if(!this.def.vars){
                    this.$set(this.def,'vars',[]);
                }
                const row = {};
                this.def.vars.push(row);
                this.$refs.xTableVars.setActiveRow(row);
            },
            xTableVarRemove(i){
                this.def.vars.splice(i-1,1);
            },
        }
    }
</script>

<style scoped>

</style>